<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-table
      v-loading="loading"
      :data="petList"
      :stripe="true"
      :show-overflow-tooltip="true"
    >
      <el-table-column label="宠物名称" align="center" prop="petName" />
      <el-table-column label="宠物头像" align="center" prop="avatarUrl">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.avatarUrl"
            :preview-src-list="[scope.row.avatarUrl]"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="宠物照片" align="center" prop="photoUrl">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.photoUrl"
            :preview-src-list="[scope.row.photoUrl]"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="120px">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" plain @click="openForm('create')">
        <Icon icon="ep:plus" class="mr-5px" /> 新增
      </el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>

  <!-- 宠物表单弹窗：添加/修改 -->
  <PetForm ref="formRef" @success="getPetList" />
</template>
<script setup lang="ts">
import {Pet, PetApi} from '@/api/javainfo/pet'
import PetForm from '@/views/javainfo/pet/PetForm.vue'

/** 用户关联宠物 弹窗 */
defineOptions({ name: 'UserPetDialog' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('用户关联的宠物') // 弹窗的标题
const loading = ref(false) // 表格的加载中
const petList = ref<Pet[]>([]) // 宠物列表数据
const userId = ref<number>() // 用户ID

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  userId.value = id
  await getPetList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 获取用户关联的宠物列表 */
const getPetList = async () => {
  loading.value = true
  try {
    // 调用宠物API，根据用户ID查询关联的宠物
    const params = {
      ownerUserId: userId.value
    }
    const data = await PetApi.getPetPage(params)
    petList.value = data.list || []
  } finally {
    loading.value = false
  }
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  // 如果是新增，设置默认的用户ID
  if (type === 'create') {
    formRef.value.open(type, undefined, userId.value)
  } else {
    formRef.value.open(type, id)
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PetApi.deletePet(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getPetList()
  } catch {}
}
</script>

